<template>
  <div class="hd">
    <div class="hd mt10">
      <img src="../../assets/mall_banner.jpg" alt="">
    </div>
    <mall-bar :showsearch="true" :activeitem="0"></mall-bar>
    <position>
      <router-link to="/mall">药品信息</router-link>
      &gt;
      <span class="last">购物车</span>
    </position>
    <div class="yybox four-cornor-wrapper" style="background:#fff;padding: 20px;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- main -->
      <div class="shopping-card-header">
        <el-checkbox v-model="checkAll">全选</el-checkbox>
      </div>
      <!-- product-detail -->
      <div class="shopping-card-content">
      <el-row :gutter="20" v-for="i in 5" class="shopping-card-item" :key="i">
        <el-col :span="2">
          <el-checkbox v-model="checkOne"> </el-checkbox>
        </el-col>
        <el-col :span="5">
          <img src="../../assets/nav-2.png" alt="" >
        </el-col>
        <el-col :span="17" class="re">
          <div class="f20">大标题大标题大标题大标题大标题大标题</div>
          <div class="t3 mt20">规格规格规格规格</div>
          <div class="mt20">
            <span class="money">￥99.00</span>
            &nbsp;&nbsp;&nbsp;
            数量 <el-input-number v-model="productNum" size="small" :max="10000" ></el-input-number>
          </div>
          <a class="del" href="javascript:;">删除</a>
        </el-col>
      </el-row>
      </div>

      <div class="shopping-card-footer">
        <el-row>
          <el-col :span="20">
            合计： <span class="money">￥999.00</span>
          </el-col>
          <el-col :span="4">
            <a class="common-main-button fr" href="javascript:;">前往付费</a>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import MallBar from '../../components/MallBar'
import Position from '../../components/Position'
export default {
  components: {MallBar, Position},
  data () {
    return {
      productNum: 1,
      checkAll: true,
      checkOne: []
    }
  },
  methods: {
    handleTabClick (tab) {
      console.log(tab)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.shopping-card-header {
  padding:10px 20px;
  border-bottom: 1px solid @color-border;
  margin-bottom: 10px;
}
.money {
    color: @color-price;
    font-size: 1.4em;
  }
.shopping-card-content {
  padding: 20px;
  img {
    width: 100%;
  }
  .shopping-card-item {
    margin-bottom: 20px;
    background-color: #FFF5EB;
    padding: 20px;
  }
  .del {
    position: absolute;
    top: 50px;
    right: 40px;
  }
}
.shopping-card-footer {
  padding: 20px;
  background-color: #F7E1D7;
}
</style>
